<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/web/js/vue2.js"></script>
    <script src="/web/js/axios.min.js"></script>
    <script src="/web/js/echarts.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="main1" style="width: 260px;height:400px; margin: 20px"></div>
<div id="main2" style="width: 600px;height:400px; margin: 20px"></div>
<div id="main11" style="width: 260px;height:400px; margin: 20px"></div>
<div id="main3" style="width: 600px;height:400px; margin: 20px"></div>
<div id="main4" style="width: 600px;height:400px; margin: 20px"></div>


<script type="text/javascript">
    let chat1 = []; // 存企业
    let chat2 = []; // 存日志
    let chat11 = []; // 存日志【成功失败】

    (async function () {
        alert(1)
        let res1= await axios.post("/analysis/firm")
        let res2 = await axios.post("/analysis/menu");
        let res3= await axios.post("/analysis/log");

        const r1=res1.data.data;
        r1.forEach(e=>chat1.push(e));

        const r2=res2.data.data;
        r2.forEach(e=>chat2.push(e));

        const r3=res3.data.data;
        r3.forEach(e=>chat11.push(e));



        test();
    })()

    // setTimeout(test, 1000);


    function test(){
        var myChart1 = echarts.init(document.getElementById('main1'));
        option1 = {
            legend: {},
            tooltip: {},
            dataset: {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
                // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。
                dimensions: ['type', 'count'],
                source: chat1,
                // source: [
                //     {product: 'D', '2023': 93.7},
                //     {product: 'C', '2023': 39.1}
                // ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);


        var myChart2 = echarts.init(document.getElementById('main2'));
        console.log("@"+chat2.length)
        let option2 = {
            title: {
                text: '菜单统计',
                subtext: 'Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: chat2,
                    // data: [
                    //     { name: 'Search Engine',value: 1048 },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        alert(111);
        // console.log(chat2);
        myChart2.setOption(option2);


        // option2.series[0].data=chat2;


        var myChart11 = echarts.init(document.getElementById('main11'));
        option11 = {
            legend: {},
            tooltip: {},
            dataset: {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
                // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。
                dimensions: ['type', 'count'],
                source: chat11,
                // source: [
                //     {product: 'A', '2023': 93.7},
                //     {product: 'B', '2023': 39.1}
                // ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart11.setOption(option11);



    }


    var myChart3 = echarts.init(document.getElementById('main3'));
    option3 = {
        xAxis: {},
        yAxis: {},
        series: [
            {
                symbolSize: 20,
                data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                    [13.0, 7.58],
                    [9.05, 8.81],
                    [11.0, 8.33],
                    [14.0, 7.66],
                    [13.4, 6.81],
                    [10.0, 6.33],
                    [14.0, 8.96],
                    [12.5, 6.82],
                    [9.15, 7.2],
                    [11.5, 7.2],
                    [3.03, 4.23],
                    [12.2, 7.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96],
                    [6.03, 7.24],
                    [12.0, 6.26],
                    [12.0, 8.84],
                    [7.08, 5.82],
                    [5.02, 5.68]
                ],
                type: 'scatter'
            }
        ]
    };
    myChart3.setOption(option3);


    var myChart4 = echarts.init(document.getElementById('main4'));
    option4 = {
        title: {
            text: 'Proportion of Browsers',
            subtext: 'Fake Data',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function () {
                var list = [];
                for (var i = 1; i <= 28; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
            indicator: [
                {text: 'IE8-', max: 400},
                {text: 'IE9+', max: 400},
                {text: 'Safari', max: 400},
                {text: 'Firefox', max: 400},
                {text: 'Chrome', max: 400}
            ]
        },
        series: (function () {
            var series = [];
            for (var i = 1; i <= 28; i++) {
                series.push({
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)'
                        }
                    },
                    data: [
                        {
                            value: [
                                (40 - i) * 10,
                                (38 - i) * 4 + 60,
                                i * 5 + 10,
                                i * 9,
                                (i * i) / 2
                            ],
                            name: i + 2000 + ''
                        }
                    ]
                });
            }
            return series;
        })()
    };
        myChart4.setOption(option4);

    // test();


</script>

</body>
</html>